<template>
  <view class="footer fixed bottom-0 flex">
    <!--tabBar-->
    <view v-for="(item, index) in tabBarList" class="flex-1 flex flex-col justify-center items-center" @click="clickMenu(item, index)">
      <view>
        <image class="w-5 h-5 block" :src="item.selectedIconPath" v-if="current == index"></image>
        <image class="w-5 h-5 block" :src="item.iconPath" v-else></image>
      </view>
      <view>
        <text class="text-xs" :class="current == index ? 'cur-text' : ''">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { storeToRefs } from 'pinia'
  import { footerStore } from '@/store/footerStore';
  import { userStore } from '@/store/userStore'
  const tabBar = footerStore()
  const userData = userStore()

  // console.log('userData====', userData.userInfo)
  tabBar.initTabBar( userData.userInfo.is_sub_account )

  const { current, tabBarList } = storeToRefs(tabBar)
  // console.log('tabBarList===', tabBarList)
  // console.log('current===', current)

  const clickMenu = (item, index) => {
    // console.log('item===', item)
    tabBar.setCurrent(index)
    uni.switchTab({ url: item.pagePath })
  }
</script>

<style scoped lang="scss">
.footer {
  height: 100rpx;
  background: #f7f7fa;
  width: 100%;
}
.cur-text {
  color: #1b6ef3;
}
</style>
